js使用剪贴板的三种方式 |
您所在的位置：网站首页 › js操作word文档 chrome › js使用剪贴板的三种方式 |
js使用剪贴板的三种方式
|
在任何浏览器，都默认支持用户的复制粘贴操作，换句话说： 在浏览器运行的JavaScript默认支持读写剪贴板的内容。 之前遇到的一个需求，点击按钮，复制文本到剪贴板中。 由于之前没遇到过这种需求 ，在百度查了一下，浏览器提供的Api 可以很方便的实现，大致有以下几种： 1. document.execCommand() 方法这种方式也是平常使用最多的，最传统的方法。而且兼容性很好， 各大浏览器都支持 MDN定义如下： document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。 // 语法： bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)返回值是布尔值，如果是 false 则表示操作不被支持或未被启用。 它支持复制、剪切和粘贴这三个操作： // 复制 document.execCommand('copy') // 剪切 document.execCommand('cut') // 粘贴 document.execCommand('paste') // copy input // paste input 复制文本 粘贴文本 const button = document.querySelector('#copy');button.addEventListener('click', () => { const input = document.querySelector('#input'); input.select(); document.execCommand('copy');})示例代码中： 当点击“复制文本” 按钮时，先选中输入框input里面的内容，然后将其复制到剪贴板，粘贴时，执行document.execCommand('paste')方法，就会将剪贴板里面的内容，输出到当前的焦点元素中。 const button = document.querySelector('#paste'); button.addEventListener('click', () => { const input = document.querySelector('#pasteInput'); input.focus(); document.execCommand('paste'); })优点： api简洁方便，满足大部分场景需求。 缺点： 它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容 它是同步执行的，如果复制、粘贴大量数据，页面会出现卡顿，导致页面无法及时响应等情况 2. ClipboardClipboard API 是浏览器在 doucument.execCommand()基础上的升级，推出的更强大的API。并且它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。 navigator.clipboardnavigator.clipboard属性返回一个新的 Clipboard 对象，所有操作都通过这个对象进行。如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。 由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。 注意：Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。 在调用时，需要明确获得用户的许可。跟剪贴板有关的主要有两个权限，clipboard-read（“读权限”）和 clipboard-wirte（“写权限”），在执行写入剪贴板时，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取。 Clipboard 对象 Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象。 1. Clipboard.readText()Clipboard.readText()方法用于复制剪贴板里面的文本数据 document.body.addEventListener( 'click', async (e) => { const text = await navigator.clipboard.readText(); console.log(text); } )上面示例中，用户点击页面后，就会输出剪贴板里面的文本。注意，浏览器这时会跳出一个对话框，询问用户是否同意脚本读取剪贴板。如果用户不同意，代码会报错，导致无法继续向下执行。可以使用try……catch语句处理。 2. Clipboard.read()Clipboard.read()方法用于复制剪贴板里面的文本数据，也可以是二进制数据（比如图片）。 该方法返回一个 Promise 对象。一旦该对象的状态变为 resolved，就可以获得一个数组，每个数组成员都是 ClipboardItem 对象的实例。 async function getClipboardContents() { try { const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { for (const type of clipboardItem.types) { const blob = await clipboardItem.getType(type); console.log(URL.createObjectURL(blob)); } } } catch (err) { console.error(err.name, err.message); } }ClipboardItem 对象表示一个单独的剪贴项，每个剪贴项都拥有ClipboardItem.types属性和ClipboardItem.getType()方法。 ClipboardItem.types属性返回一个数组，里面的成员是该剪贴项可用的 MIME 类型，比如某个剪贴项可以用 HTML 格式粘贴，也可以用纯文本格式粘贴，那么它就有两个 MIME 类型（text/html和text/plain）。 ClipboardItem.getType(type)方法用于读取剪贴项的数据，返回一个 Promise 对象。该方法接受剪贴项的 MIME 类型作为参数，返回该类型的数据，该参数是必需的，否则会报错。 3. Clipboard.writeText()Clipboard.writeText()方法用于将文本内容写入剪贴板。 document.body.addEventListener( 'click', async (e) => { await navigator.clipboard.writeText('一段文本内容') } ) 4. Clipboard.write()Clipboard.write()方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。 该方法接受一个 ClipboardItem 实例作为参数，表示写入剪贴板的数据。 try { const imgURL = 'https://dummyimage.com/300.png'; const data = await fetch(imgURL); const blob = await data.blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]); console.log('Image copied.'); } catch (err) { console.error(err.name, err.message); }上面示例中，脚本向剪贴板写入了一张图片。注意，Chrome 浏览器目前只支持写入 PNG 格式的图片。 ClipboardItem()是浏览器原生提供的构造函数，用来生成ClipboardItem实例，它接受一个对象作为参数，该对象的键名是数据的 MIME 类型，键值就是数据本身。 3. clipboard.jsclipboard 是一个非常轻巧，简洁的第三方库，压缩后只有3kb，可以说是很小了。并且周下载量在百万左右。 为什么而使用？ 官方是这么说的： 如何安装？ npm安装 npm install clipboard --save 或 直接下载该文件到本地，下载地址：点我。 在项目中引用： 或者 import Clipboard from 'clipboard';假如要复制input标签的内容， 可以这样写： 点我复制 import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn');可以看到，在 标签中添加了一个 data-clipboard-target 属性，它的值是需要复制的 内容的 id。 事件在复制事件后，有提供回调函数， 例如： var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); }); 小结目前遇到的只总结了这三种方法，clipboard js 具体参考官网demo，这里主要讲述有哪些方法可以实现此功能。 |
【本文地址】
今日新闻 |
推荐新闻 |